<!-- src/components/ToolTree.vue -->
<template>
  <div class="tree-container">
    <el-input
      v-model="filterText"
      style="width: 240px"
      placeholder="关键词搜索"
      @input="handleFilter"
    />
    <div class="space" style="height: 20px;"></div>
    <el-tree
      :data="filteredTreeData"
      :props="treeProps"
      class="custom-tree"
      :default-expand-all="true"
      @node-click="handleNodeClick"
    />
  </div>
</template>

<script>
import { loadAlgorithms } from '@/utils/loadAlgorithms';

export default {
  data() {
    return {
      treeData: [],
      treeProps: {
        label: 'name',
        children: 'tools',
      },
      filterText: '', // 过滤关键字
    };
  },
  computed: {
    filteredTreeData() {
      if (!this.filterText) {
        return this.treeData; // 如果过滤关键字为空，返回原始数据
      }
      // 过滤树状图数据
      return this.treeData.map(category => ({
        ...category,
        tools: category.tools.filter(tool => tool.name.toLowerCase().includes(this.filterText.toLowerCase())),
      })).filter(category => category.tools.length > 0); // 过滤掉没有匹配工具的分类
    },
  },
  mounted() {
    const categories = loadAlgorithms();
    this.treeData = categories.map(category => ({
      name: category.name,
      tools: category.tools.map(tool => ({
        name: tool.name,
      })),
    }));
  },
  methods: {
    handleFilter() {
      // 可以在这里添加其他处理逻辑，比如实时搜索等
    },
    handleNodeClick(data) {
      if (data.name) {
        this.$router.push(`/tools/${data.name}`);
      }
    },
  },
};
</script>

<style scoped>
.tree-container {
  width: 100%; 
}

.custom-tree :deep(.el-tree-node__label) {
  font-weight: bold;
  font-size: 18px; /* 调整父节点字体大小 */
  color: black; 
  line-height: 1.5; /* 调整行间距 */
}

.custom-tree :deep(.el-tree-node__children .el-tree-node__label) {
  font-weight: bold;
  font-size: 16px; /* 调整子节点字体大小 */
  color: #888; 
  line-height: 1.5; /* 调整行间距 */
}
</style>
